// WebRTC.js
import React, { useRef, useEffect } from 'react';
import SimplePeer from 'simple-peer';

function WebRTC() {
  // 使用了 useRef 钩子来创建了两个 video 元素的引用
  // 分别用于本地视频流和远程视频流的显示
  const localVideoRef = useRef();
  const remoteVideoRef = useRef();
  const peerRef = useRef();
  
  // 使用 useEffect 钩子来获取用户媒体权限
  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then((stream) => {
        localVideoRef.current.srcObject = stream;
        // 并创建了一个 SimplePeer 对象来管理 WebRTC 连接
        peerRef.current = new SimplePeer({ initiator: true, trickle: false, stream });
        // 一旦连接建立，我们可以在 signal 事件中获取和发送信令，以便进行对等连接
        peerRef.current.on('signal', (data) => {
          console.log('SIGNAL', JSON.stringify(data));
        });
        // 在 stream 事件中接收远程视频流并显示在页面上
        peerRef.current.on('stream', (stream) => {
          remoteVideoRef.current.srcObject = stream;
        });
      })
      .catch((error) => console.error('Error accessing media devices:', error));

    return () => {
      if (peerRef.current) {
        peerRef.current.destroy();
      }
    };
  }, []);

  return (
    <div>
      <span>localVideoRef</span>
      <video ref={localVideoRef} autoPlay muted></video>

      <span>remoteVideoRef</span>
      <video ref={remoteVideoRef} autoPlay></video>
    </div>
  );
}

export default WebRTC;
